<!-- 新增组别 -->
<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="980px"
    :title="title"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div v-loading="loading">
      <el-row v-for="(item, index) in eventGroups" :key="index" :gutter="15">
        <el-col :span="19">
          <event-group-template :ref="'eventGroupTemplate_' + index" :key="index" :event-group="item" :category="categoryDTO" />
        </el-col>
        <el-col :span="5" style="position: absolute;bottom: 19px;right: 0;">
          <el-button v-if="eventGroups.length !== 1" type="danger" size="mini" icon="el-icon-close" @click="deleteEventGroup(index)">删除</el-button>
          <el-button v-if="index === eventGroups.length - 1" type="default" size="mini" icon="el-icon-plus" @click="addEventGroup(index)">组别</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right">
          <el-button type="default" size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" size="mini" @click="submitGroupInfo()">确 定</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import {
  api_POST_EventsManagementEventGroup
} from '@/extend/api/gameswaggerApi/app';
import eventGroupTemplate from './eventGroupTemplate';
export default {
  components: {
    eventGroupTemplate
  },
  data() {
    return {
      title: '添加组别',
      loading: false,
      dialogVisible: false,
      eventGroups: [{}],
      categoryDTO: {}
    };
  },
  methods: {
    open(categoryInfo) {
      console.log(categoryInfo);
      this.categoryDTO = categoryInfo;
      this.eventGroups = [{}];
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.eventGroupTemplate && this.$refs.eventGroupTemplate.init();
      });
    },
    // 提交
    submitGroupInfo() {
      const _promiseList = [];
      for (let i = 0; i < this.eventGroups.length; i++) {
        _promiseList.push(this.$refs['eventGroupTemplate_' + i][0].submitGroupInfo());
      }
      Promise.all(_promiseList).then(eventGroups => {
        const _eventGroups = {
          categoryId: this.categoryDTO.id,
          eventGroupCreateDtos: eventGroups
        };
        this.createEventGroup(_eventGroups);
      });
    },
    // 添加组别
    createEventGroup(eventGroupsVO) {
      return new Promise((resolve, reject) => {
        this.loading = true;
        console.log(eventGroupsVO);
        api_POST_EventsManagementEventGroup(eventGroupsVO).then(res => {
          this.$message({ type: 'success', message: '新增成功！' });
          this.loading = false;
          this.dialogVisible = false;
          this.$emit('refreshPage');
          resolve(res);
        }, error => {
          this.loading = false;
          this.$message({ type: 'error', message: '新增失败！' + error.error.message });
          reject(error);
        });
      });
    },
    // 删除组别
    deleteEventGroup(index) {
      const _promiseList = [];
      for (let i = 0; i < this.eventGroups.length; i++) {
        _promiseList.push(this.$refs['eventGroupTemplate_' + i][0].calcGroupInfo());
      }
      Promise.all(_promiseList).then(eventGroups => {
        this.eventGroups = eventGroups;
        this.eventGroups.splice(index, 1);
      });
    },
    // 新增组别
    addEventGroup(index) {
      this.eventGroups.push({});
    }
  }
};
</script>
